<!-- index.vue -->
<template>
  <el-drawer v-model="drawerVisible" direction="ttb" size="100%" :with-header="false" style="background-color: #f8f8ff">
    <el-card shadow="never" style="margin-bottom: 10px">
      <div style="display: flex; justify-content: space-between">
        <div>
          <span :style="{ marginLeft: '10px', color: noteColor }">{{ noteText }}</span>
        </div>
        <div class="top-title">
          {{ title }}
        </div>
        <div>
          <el-button type="danger" class="btn" @click="handleClose" icon="Close">关闭</el-button>
        </div>
      </div>
    </el-card>
    <el-card shadow="never">
      <el-table border :data="tableData" v-loading="loading" show-summary style="height: calc(100vh - 150px)" class="enhanced-table">
        <el-table-column prop="subjectCode" label="预算科目编码" min-width="150" v-if="false" align="center" />
        <el-table-column prop="subjectName" label="预算科目名称" min-width="150" align="center" show-overflow-tooltip/>

        <template v-for="item in titleList" :key="item.key">
          <el-table-column :label="item.label" align="center">
            <el-table-column v-for="dict in yardType" :key="dict.value" :label="dict.label" :prop="`${dict.value}_${item.key}`" align="center">
              <template #default="scope">
                <el-tooltip
                  v-if="getOldValue(scope.row, `${dict.value}_${item.key}`) !== '无变化'"
                  effect="dark"
                  placement="top"
                  :content="`填报金额: ${getOldValue(scope.row, `${dict.value}_${item.key}`)}`"
                >
                  <span :class="highlightClass(scope.row, `${dict.value}_${item.key}`)">
                    {{ scope.row[`${dict.value}_${item.key}`] }}
                  </span>
                </el-tooltip>
                <span v-else :class="highlightClass(scope.row, `${dict.value}_${item.key}`)">
                  {{ scope.row[`${dict.value}_${item.key}`] }}
                </span>
              </template>
            </el-table-column>
          </el-table-column>
        </template>

        <el-table-column label="合计" align="center">
          <el-table-column v-for="dict in yardType" :key="dict.value" :label="dict.label" :prop="`${dict.value}_total`" align="center">
            <template #default="scope">
              <el-tooltip
                class="el-popper"
                v-if="getOldValue(scope.row, `${dict.value}_total`) !== '无变化'"
                effect="dark"
                placement="top"
                :content="`填报合计: ${getOldValue(scope.row, `${dict.value}_total`)}`"
              >
                <span :class="highlightClass(scope.row, `${dict.value}_total`)">
                  {{ scope.row[`${dict.value}_total`] }}
                </span>
              </el-tooltip>
              <span v-else :class="highlightClass(scope.row, `${dict.value}_total`)">
                {{ scope.row[`${dict.value}_total`] }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="总合计" prop="total" align="center" show-overflow-tooltip />
        </el-table-column>
      </el-table>
    </el-card>
  </el-drawer>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  modelValue: { type: Boolean, required: true },
  title: { type: String, required: true },
  tableData: { type: Array, default: () => [] },
  titleList: { type: Array, required: true },
  yardType: { type: Array, required: true },
  loading: { type: Boolean, default: false },
  noteText: { type: String, default: '*注：压降后的金额高亮显示' },
  noteColor: { type: String, default: 'red' },
  getOldValue: { type: Function, required: true },
  highlightClass: { type: Function, required: true }
});

const emit = defineEmits(['update:modelValue']);

const drawerVisible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
});

const handleClose = () => {
  drawerVisible.value = false;
};
</script>
<style scoped lang="scss">
@import '@/assets/styles/common-style';
</style>
